<script setup lang="ts">

import MmdliIcon from '@/components/ico/login/mmdliIcon.vue'
import YzmdlIcon from '@/components/ico/login/yzmdlIcon.vue'
import { ref } from 'vue'

function auth() {
  const container = document.querySelector('.login')
  container.classList.add('b')
}

function pass() {
  const container = document.querySelector('.login')

  container.classList.remove('b')
}

const t = ref(true)
const b=ref(false)
setTimeout(() => {
  t.value = false
  b.value = true
}, 1000)

</script>

<template>
  <div style="width: 100%;height: 100%" v-loading="t">


    <div class="common-layout" v-if="b">
      <div class="login b">
        <div class="login-button">
          <div class="auth" @click="auth">验证码登录</div>
          <div class="pass" @click="pass">密码登录</div>
        </div>
        <div class="hk"></div>
        <div class="form-main">
          <div class="form">
            <mmdli-icon />
          </div>
          <div class="form">
            <yzmdl-icon />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>


.login.b .auth {

  text-shadow: 0 -1px 13px white;
}

.login.b .pass {
  text-shadow: 0 0 0 #ffffff00;
}

.common-layout {
  width: 100%;
  height: 100vh;
  color: #f3f3f3;
  background: url("src/assets/669657f7-f018-49a5-9afd-a65ba2c83d84.jpg") no-repeat;
  background-size: cover;
}

.login {
  width: 600px;
  height: 385px;
  margin: 0 auto;
  background: #323232d9;
  position: relative;
  top: 25%;
  border-radius: 30px;
  box-shadow: 0 0 19px 5px #1f1f1f;
  overflow: hidden;
}

.login-button {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
}

.pass {
  padding-top: 30px;
  width: 50%;
  height: 60px;
  text-align: center;
  cursor: pointer;
  text-shadow: 0 -1px 13px white;
}

.auth {
  padding-top: 30px;
  width: 50%;
  height: 60px;
  text-align: center;
  cursor: pointer;
}

.login-button div:hover {
  text-shadow: 0 0 8px white;
}

.hk {
  transition: transform 0.6s ease-in-out;
  width: 45%;
  margin-left: 5%;
  height: 1px;
  background-color: white;
  box-shadow: 1px 1px 10px 1px #a3a3a3c7;
  transform: translateX(100%);
}

.form {
  width: 100%;
  height: 100%;
}

.form-main {
  width: 200%;
  height: 320px;
  display: flex;
  transition: transform 0.6s ease-in-out;
  transform: translateX(0%);
}

.login.b .form-main {
  transform: translateX(-50%);
}

.login.b .hk {
  transform: translateX(0%);
}
</style>